<template>
  <div class="article-detail-page">
    <!-- <van-button type="info" @click="fn">信息按钮</van-button> -->
    <!--   <van-nav-bar
      title="面经详情"
      left-text="返回"
      right-text="搜索"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar> -->

    <van-nav-bar
      title="面经详情"
      left-text="返回"
      left-arrow
      class="nav"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    </van-nav-bar>

    <!-- <nav class="nav"><span class="back" @click="back">&lt;</span> 面经详情</nav> -->
    <header class="header">
      <h1>{{ obj.stem }}</h1>
      <p>
        {{ obj.createdAt }} | {{ obj.views }} 浏览量 |
        {{ obj.likeCount }} 点赞数
      </p>
      <p>
        <img :src="obj.avatar" alt="" />
        <span>{{ obj.creator }}</span>
      </p>
    </header>
    <main class="body" v-html="obj.content"></main>
    <div class="like-collect">
      <div
        class="like like-collect-item"
        :class="{ chose: obj.likeFlag }"
        @click="collectOrLike(1)"
      >
        <van-icon
          name="like-o"
          size="20"
          :color="obj.likeFlag === 1 ? '#fff' : '#000'"
        />
      </div>
      <div
        class="collect like-collect-item"
        :class="{ chose: obj.collectFlag }"
        @click="collectOrLike(2)"
      >
        <van-icon
          name="star-o"
          size="20"
          :color="obj.collectFlag === 1 ? '#fff' : '#000'"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant"; //promptAction提示框
import myAxios from "@/utils/httpUtil";
// 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 请求方式: get
export default {
  name: "ArticleDetailPage",
  data() {
    return {
      obj: {},
    };
  },
  methods: {
    fn() {
      console.log("信息按钮");
    },
    onClickLeft() {
      Toast("返回");
      this.$router.back();
    },
    onClickRight() {
      console.log("按钮");
    },
    getDetail() {
      const id = this.$route.params.id;
      myAxios.get(`/h5/interview/show?id=${id}`).then((res) => {
        this.obj = res.data.data;
        // console.log(res.data.data);
      });
    },
    // 操作类型：1点赞2收藏
    collectOrLike(type) {
      myAxios
        .post("/h5/interview/opt", { id: this.obj.id, optType: type })
        .then((res) => {
          if (res.data.code === 10000) {
            this.getDetail();
          }
          console.log(res);
        });
    },
  },
  created() {
    this.getDetail();
  },
};
</script>

<style lang="less" scoped>
.article-detail-page {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .header {
    padding: 0 15px;
    margin-top: 10vh;
    p {
      color: #999;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .like-collect {
    position: fixed;
    bottom: 20vw;
    right: 10vw;
    width: 25vw;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    .like-collect-item {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 0.53333vw 0.53333vw 2.66667vw #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .chose {
      background-color: #fec635;
    }
  }
  .body {
    padding: 0 15px;
  }
}
</style>
